<template>
	<view class="main">
		<view class="top" :style="{ backgroundImage: `url(${configInfo['Index_Top_Img'].listImage})` }">
			<view class="title1" v-if="configInfo['Index_First_Title']">{{  configInfo['Index_First_Title'].content}}</view>
			<view class="title2"  v-if="configInfo['Index_Second_Title']">{{  configInfo['Index_Second_Title'].content}}</view>
			<view class="title3"  v-if="configInfo['Index_Third_Title']">{{  configInfo['Index_Third_Title'].content}}</view>
			<view class="row">
				<view class="search1"  @click="selectSearch(0)">
					<image src="../../../static/images/index-serch.png" class="search-icon"></image>
					<view class="search1-text">快速搜索</view>
				</view>
				<view class="search2"  @click="selectSearch(1)">
					<image src="../../../static/images/index-location.png" class="search-icon"></image>
					<view class="search2-text">产业分布图</view>
				</view>
			</view>
		</view>

		<view class="search-box">
			<view class="row-between" style="height:120rpx;align-items: center;">
				<input class="input" placeholder="搜索产业园名称" v-model="parkName1"/>
				<view class="search-btn"  @click="clickHot()">搜索</view>
			</view>
			<view class="line"></view>
			<view class="row2" style="margin-top: 32rpx;">
				<image src="../../../static/images/index-hot.png" class="hot-icon"></image>
				<view class="hot1">热门搜索：</view>
				<view class="hot-item"  v-for="(item,index) in hotInfo" :key="index" @click="clickHot(item.name)">{{item.name}}</view>
			</view>
			<view style="height:32rpx"></view>
		</view>

		<view class="row3">
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_First_Num']">{{configInfo['Index_First_Num'].content}}
					<span class="small">+</span>
				</view>
				<view class="desc">
					优质产业园区
				</view>
			</view>
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_Seconde_Num']">{{configInfo['Index_Seconde_Num'].content}}
					<span class="small">万</span>
				</view>
				<view class="desc">
					龙头企业客户资源
				</view>
			</view>
		</view>


		<view class="row3">
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_Third_Num']">{{configInfo['Index_Third_Num'].content}}
					<span class="small">+</span>
				</view>
				<view class="desc">
					产业高峰论坛、招商活动
				</view>
			</view>
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_Fourth_Num']">{{configInfo['Index_Fourth_Num'].content}}
					<span class="small">亿</span>
				</view>
				<view class="desc">
					累计招商引资总额
				</view>
			</view>
		</view>

		<view class="row3">
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_Fifth_Num']">{{configInfo['Index_Fifth_Num'].content}}
					<span class="small">家</span>
				</view>
				<view class="desc">
					商协会组织
				</view>
			</view>
			<view class="num-item">
				<view class="big" v-if="configInfo['Index_Sixth_Num']">{{configInfo['Index_Sixth_Num'].content}}
					<span class="small">年</span>
				</view>
				<view class="desc">
					深耕招商引资行业
				</view>
			</view>
		</view>
		
		<view class="banner" style="margin-top:96rpx">
			<swiper :indicator-dots="true"  autoplay="true" mode="dot" class="banner" :height="screenHeight"> 
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image class="banner" :src="item.image"></image>
								</swiper-item>
			</swiper>
		</view>
		<view class="part">
			<view class="part-title">
				产业园区
			</view>
			<view class="part-line"></view>
		</view>
		
		<div class="park-img" v-for="(item,index) in park " :key="index" @click="parkDetail(item.id)">
			<image class="park-img" :src="item.listImage" >
				<view class="park-title">{{item.baseTitle}}</view>
			</image>
		</div>
		<div class="row-between" style="margin-top: 72rpx;width: 100%;">
			<div style="display: flex;">
				<image src="../../../static/images/index-left.png" class="img-left" @click="clickParkArrow(0)"></image>
				<image src="../../../static/images/index-right.png" class="img-left"  @click="clickParkArrow(1)"></image>
			</div>
			<div class="more">查看更多</div>
		</div>
		
		
		<view class="part">
			<view class="part-title">
				公司介绍
			</view>
			<view class="part-line"></view>
		</view>
		
		<video  v-if="configInfo['Company_Introduction']" :src="configInfo['Company_Introduction'].videos" class="banner" style="margin-top:72rpx ;"></video>
		
		<view class="part">
			<view class="part-title">
				产业头条
			</view>
			<view class="part-line"></view>
		</view>
		
		<div class="park-img" v-for="(item,index) in homeVideos " :key="index">
			<!-- <video class="park-img" :src="item.path" :controls="false" >
			</video> -->
			<image class="cover" :src="item.path+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_650,m_fast'" mode="aspectFill"></image>
			<image class="park-video" src="../../../static/images/video-play.png"></image>
			<view class="park-title">{{item.title}}</view>
		</div>
		<div class="row-between" style="margin-top: 72rpx;width: 100%;">
			<div style="display: flex;">
				<image src="../../../static/images/index-left.png" class="img-left" @click="clickParkArrow(0)"></image>
				<image src="../../../static/images/index-right.png" class="img-left"  @click="clickParkArrow(1)"></image>
			</div>
			<div class="more">查看更多</div>
		</div>
		
		<view class="foot">
			
			<view class="foot-title">
				<image src="../../../static/images/nav-logo.png" class="foot-logo"></image>
				<view class="foot-text">掌上半岛·产业园地图</view>
			</view>
			<view class="foot-line"></view>
			
			<view class="tag-row">
				<view class="tag" v-for="(item,index) in navItems" :key="index">
					{{item.name}}
				</view>
			</view>
			
			<view class="foot-line"></view>
			<view class="tag-row" >
				<view class="code">
					<image :src="websiteInfo['Phone_QRCode'].content" class="code-img" v-if="websiteInfo['Phone_QRCode']"></image>
					<view class="code-text">手机端产业园地图</view>
				</view>
				<view class="code" style="margin-left:96rpx">
					<image :src="websiteInfo['Douyin_QRCode'].content" class="code-img" v-if="websiteInfo['Douyin_QRCode']"></image>
					<view class="code-text">关注抖音</view>
				</view>
			</view>
			<view class="tag-row" style="margin-top: 72rpx;">
				<view class="code">
					<image :src="websiteInfo['Wechart_QRCode'].content" class="code-img" v-if="websiteInfo['Wechart_QRCode']"></image>
					<view class="code-text">关注微信公众号</view>
				</view>
			</view>
					<view class="foot-line"></view>
			<view class="co-title">
				商务合作
			</view>
			<view class="co">
				<image src="../../../static/images/foot-phone.png" class="co-icon"></image>
				<view class="co-text" v-if="websiteInfo['Contact_Telephone']">{{websiteInfo['Contact_Telephone'].content }}</view>
			</view>
			<view class="co">
				<image src="../../../static/images/foot-email.png" class="co-icon"></image>
				<view class="co-text"  v-if="websiteInfo['Contact_Email']">{{websiteInfo['Contact_Email'].content }}</view>
			</view>
			<view class="co">
				<image src="../../../static/images/foot-location.png" class="co-icon"></image>
				<view class="co-text"  v-if="websiteInfo['Company_Address']">{{websiteInfo['Company_Address'].content }}</view>
			</view>
			<view class="foot-line"></view>
			<view class="copy">Copyright © 掌上半岛</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				    navItems: [
				        { name: '首页', selected: true, width: '29px' }
				        , { name: '产业分布图', selected: false, width: '78px' }
				        , { name: '厂房租售', selected: false, width: '68px' }
				        , { name: '品质园区', selected: false, width: '68px' }
				        , { name: '专精特新企业', selected: false, width: '98px' }
				        , { name: '每日直播', selected: false, width: '68px' }
				        , { name: '联系我们', selected: false, width: '68px' }
				      ],
				configInfo: {
					Index_Top_Img: {
						listImage: ''
					}
				},
				hotInfo: [],
				banner: [],
				park: [],
				parkCount: 0,
				homeVideos: [],
				homeVideoCount: 0,
				websiteInfo: {},
				searchIndex: 0,
				hasToken: false,
				zhuanjingUrl: '',
				parkName1: '',
				parkAll:[],
				park:[],
				parkCount:0,
				nowParkIndex:0,
				screenHeight:0
			}
		},

		onLoad() {

		},
		mounted() {
			let that = this
			   uni.getSystemInfo({
			        success: function (res) {
						that.screenHeight = res.windowWidth *2
						console.log('resresres',res)
			        }
			    });

			console.log('onLoadonLoad')
			this.getConfig()
			this.getInfo()
			this.getPark()
			this.getHomeVideo()
			this.getBanner()
			this.getHot()
		},

		methods: {
			parkDetail(id){
				uni.navigateTo({
					url:'./details?id='+id
				})
			},
			clickParkArrow(type){
				if(type==0){// 向前
					if(this.nowParkIndex <=2 ){
						return
					}
					this.park =[]
					if(this.nowParkIndex%2==0){
						this.park.push(this.parkAll[this.nowParkIndex-4])
						this.park.push(this.parkAll[this.nowParkIndex-3])
						this.nowParkIndex = this.nowParkIndex-2
					}else{
						this.park.push(this.parkAll[this.nowParkIndex-3])
						this.park.push(this.parkAll[this.nowParkIndex-2])
						this.nowParkIndex = this.nowParkIndex-1
					}
					// this.nowParkIndex=this.nowParkIndex-3
					console.log('this.nowParkIndex11',this.nowParkIndex)
				}else{
					if(this.nowParkIndex >=this.parkAll.length){
						return
					}
					this.park =[]
					this.park.push(this.parkAll[this.nowParkIndex])
					if(this.nowParkIndex+2<this.parkAll.length){
						this.park.push(this.parkAll[this.nowParkIndex+1])
						this.nowParkIndex=this.nowParkIndex+2
					}else{
						this.nowParkIndex++
					}
				
				}
			}
			    , clickHot(name) {
			      if (!name) {
			        this.$emit('changeItem', 1, this.parkName1)
			      } else {
			        this.$emit('changeItem', 1, name)
			      }
			    }
			 , async getHot() {
				 let res = await this.$req({
				 	url: `/mng/dictionary/cache/lowerTree/hot_searchs`,
				 	method: 'get',
				 })
			      if (res.code == 200) {
			        this.hotInfo = res.data
			      }
			    }

			
			, async getHomeVideo() {
				let res = await this.$req({
					url: `/palm_peninsula/video/queryBasicJoinPark`,
					method: 'get',
					data: {
						page: 1, limit: -1, sortField: 'create_time', indexState: true 
					}
				})
			      if (res.code == 200) {
			        this.homeVideos = res.data
			        this.homeVideoCount = res.count
			      }
			    },
			
			     async getPark() {
					let res = await this.$req({
						url: `/palm_peninsula/park/queryByBasic`,
						method: 'get',
						data: {
						page: 1, limit: -1, sortField: 'create_time', indexState: true
						}
					})
			      if (res.code == 200) {
			        this.parkAll = res.data
					this.clickParkArrow(1)
			        this.parkCount = res.count
			      }
			    }
				    , async getBanner() {
						let res = await this.$req({
							url: `/website/website/carousel/Wechat:guan409932398/query`,
							method: 'get',
							data: {
								page: 1,
								limit: -1,
								sortField: 'create_time',
							}
						})
				      if (res.code == 200) {
						  res.data.forEach(item=>{
							this.banner.push({title:item.title,image:item.listImage})
						  })
				      }
				    }
				    , selectSearch(index) {
				      this.searchIndex = index
				      if (index == 1) {
				        this.$emit('changeItem', 1, '')
				      }
				    },
			async getConfig() {
				let res = await this.$req({
					url: `/website/website/navigation/Wechat:guan409932398/cacheTree`,
					method: 'get',
					data: {
						page: 1,
						limit: -1,
						sortField: 'create_time'
					}
				})
				if (res.code == 200) {
					res.data[0].navs.forEach(item => {
						this.configInfo[item.navCode] = item
					})
					this.zhuanjingUrl = res.data[4].content
				}
			},
			async getInfo() {
				let res = await this.$req({
					url: `/website/website/information/Wechat:guan409932398/query`,
					method: 'get',
					data: {
						page: 1,
						limit: -1,
						sortField: 'create_time'
					}
				})
				if (res.code == 200) {
					res.data.forEach(item => {
						this.websiteInfo[item.code] = item
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.foot{
		margin-top: 254rpx;
		display: flex;
		flex-direction: column;
		background: #51585F;
		.foot-title{
			display: flex;
			margin-top: 72rpx;
			align-items: center;
			.foot-logo{
				margin-left: 24rpx;
				width: 88rpx;
				height: 84rpx;
			}
			.foot-text{
				margin-left: 32rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
			}
		}
		.foot-line{
			margin-left: 24rpx;
			margin-right: 24rpx;
			width: calc(100% - 48rpx);
			margin-top: 48rpx;
			height: 2rpx;
			background: #FFFFFF;
			opacity: 0.1;
		}
		.tag-row{
			margin-left: 24rpx;
			width: 100%;
			flex-wrap: wrap;
			display: flex;
		}
		.tag{
			width: 50%;
			margin-top: 72rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
		}
		
		.code{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 240rpx;
		}
		.code-img{
			width: 240rpx;
			height: 240rpx;
			background: #FFFFFF;
		}
		.code-text{
			margin-top: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
		}
		.co-title{
			margin-top: 72rpx;
			margin-left: 24rpx;
			font-size: 48rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
		}
		.co{
				margin-top: 32rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
		}
		.co-icon{
			width: 80rpx;
			height: 80rpx;
		}
		.co-text{
			margin-left: 28rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
		}
		.copy{
			margin-bottom: 48rpx;
			margin-top: 48rpx;
			justify-content: center;
			align-items: center;
			text-align: center;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 44rpx;
		}
	}
	
	.img-left{
		margin-left: 48rpx;
		width: 72rpx;
		height: 72rpx;
	}
	.more{
		margin-right: 48rpx;
		width: 200rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 2rpx solid #004E96;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #004E96;
		line-height: 28rpx;
	}
	
	.park-img{
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 32rpx;
		width: calc(100% - 48rpx);
		height: 800rpx;
		border-radius: 4rpx;
		position: relative;
	}
	.park-video{
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		width: 96rpx;
		height: 96rpx;
	}
	.cover{
		width: 100%;
		height: 100%;
	}
	.park-title{
		position: absolute;
		bottom: 48rpx;
		left: 40rpx;
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 18px;
	}
	
	.part{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.part-title{
			margin-top:120rpx;
			font-size: 56rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 56rpx;
		}
		.part-line{
			margin-top: 24rpx;
			width: 56rpx;
			height: 8rpx;
			background: #004E96;
		}
	}

	
	.banner {
		width: 100%;
		height: 100vw;
	}

	.num-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.big {
			font-size: 100rpx;
			font-family: DINCondensed-Bold, DINCondensed;
			font-weight: bold;
			color: #004E96;
			line-height: 100rpx;
		}

		.small {
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #004E96;
			line-height: 52rpx;
		}

		.desc {
			margin-top: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 28rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: white;
		overflow: scroll;
	}

	.top {
		width: 100%;
		height: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		    background-repeat: no-repeat;
		    background-size: cover;
		.title1 {
			margin-top: 122rpx;
			font-size: 72rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
		}

		.title2 {
			margin-top: 170rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
		}

		.title3 {
			margin-left: 24rpx;
			margin-right: 24rpx;
			margin-top: 116rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.8);
			line-height: 32rpx;
		}
	}

	.search1 {
		width: 50%;
		height: 96rpx;
		background: #FF9D20;
		border-radius: 4rpx 0px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: center;

		.search1-text {
			margin-left: 16rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.row {
		position: absolute;
		bottom: 0;
		width: calc(100% - 48rpx);
		display: flex;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.search-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.search2 {
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 0px 4rpx 0px 0px;
		border: 2rpx solid #FF9D20;
		width: 50%;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;

		.search2-text {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF9D20;
			line-height: 40rpx;
		}
	}

	.arrow1 {
		position: absolute;
		left: 73px;
		width: 0;
		height: 0;
		border-top: 5px solid #ff9d20;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
	}

	.arrow2 {
		position: absolute;
		left: 243px;
		width: 0;
		height: 0;
		border-top: 5px solid #ff9d20;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
	}

	.row2 {
		display: flex;
		align-items: center;
	}

	.row3 {
		margin-top: 72rpx;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.row-between {
		display: flex;
		justify-content: space-between;
	}

	.search-box {
		margin-left: 24rpx;
		margin-right: 24rpx;
		width: calc(100% - 48rpx);
		background: #FFFFFF;
		box-shadow: 0px 0px 48rpx 0px rgba(12, 12, 12, 0.12);
		border-radius: 0px 0px 4rpx 4rpx;
	}

	.search-btn {
		margin-right: 48rpx;
		width: 120rpx;
		height: 56rpx;
		background: #FF9D20;
		border-radius: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.input {
		padding-left: 48rpx;
		border: none;
	}

	.line {
		margin-left: 48rpx;
		margin-right: 48rpx;
		width: calc(100% - 96rpx);
		height: 2rpx;
		background: #F1F1F1;
	}

	.hot-icon {
		margin-left: 48rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.hot1 {
		margin-left: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}

	.hot-item {
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
</style>
